<template>
    <div class="right_content2">
        <div class="title">传播趋势</div>
        <ShowEcharts :options="options" :height="height"></ShowEcharts>
    </div>
</template>

<script setup lang="ts">
import { Ref, ref, reactive, inject } from 'vue';
import ShowEcharts from '@/components/ShowEcharts.vue';
const height: Ref<string> = ref('2.39rem');

const echarts = inject('echarts');
let options = reactive({
    color: ['#80FFA5', '#00DDFF', '#37A2FF'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Line 1', 'Line 2', 'Line 3'],
        textStyle: {
            color: '#fff'
        },
        top: 25
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
            axisLabel: {
                // 文本的间隔,设置为0,显示所有的文本
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },


        }
    ],
    yAxis: [
        {
            type: 'value',
            // 背景分割线
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            interval: 300
        }
    ],
    series: [
        {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 1
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                origin: 'start',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                origin: 'start',
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 221, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
            name: 'Line 3',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                origin: 'start',
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(55, 162, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(116, 21, 219)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
        }
    ]
})
</script>

<style lang="less" scoped>
.right_content2 {
    position: relative;

    .title {
        font-size: 0.1458rem;
        position: absolute;
        right: .5208rem;
        top: -0.3125rem;
    }
}
</style>
